<template>
	<u-swiper class="xi-swiper" :circular="circular" :height="height" imgMode="aspectFill" :list="list"
		@change="e => current = e.current" :autoplay="autoplay">
		<template v-slot:indicator>
			<view class="indicator flex-all-c">
				<view class="indicator__dot" v-for="(item, index) in list" :key="index"
					:class="[index === current && 'indicator__dot--active']"></view>
			</view>
		</template>
	</u-swiper>
</template>

<script setup>
	import {
		ref
	} from 'vue';
	const props = defineProps({
		list: {
			type: Array,
			default: () => []
		},
		height: {
			type: [Number, String],
			default: 300
		},
		autoplay: {
			type: Boolean,
			default: true
		},
		circular: {
			type: Boolean,
			default: true
		}
	})
	const current = ref(0)
</script>

<style>
</style>